import React, { useEffect, useState, useLayoutEffect } from 'react'
import { StyleSheet, Text, TouchableOpacity, View, ImageBackground, FlatList, Image } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AntDesign, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
import * as api from '../server'

const User = () => {
    const [userInfo, setUserInfo] = useState([]);
    const [unreadMess, setunreadMess] = useState(0);
    const [collectNum, setCollectNum] = useState(0);
    const [userInfoList, setUserInfoList] = useState([
        { title: '收藏', val: '123' },
        { title: '积分', val: '321' },
        { title: '发布文章', val: '132' }
    ])
    let listInfo = [
        {
            icon: <Ionicons name="time-outline" size={24} color="#ccc" />,
            val: '最近浏览',
            next: <Image source={require('../images/next.png')} style={styles.listInfo_next} />
        },
        {
            icon: <AntDesign name="message1" size={24} color="#ccc" />,
            val: '消息',
            next: <Text style={{ color: '#656565', fontSize: 15 }}>{unreadMess}</Text>
        },
        {
            icon: <MaterialCommunityIcons name="alpha-u-box-outline" size={24} color="#ccc" />,
            val: '草稿箱',
            next: <Text style={{ color: '#656565', fontSize: 15 }}>33M</Text>
        },
        {
            icon: <Ionicons name="ios-settings-outline" size={24} color="#ccc" />,
            val: '系统设置',
            next: <Image source={require('../images/next.png')} style={styles.listInfo_next} />
        },
        {
            icon: <AntDesign name="book" size={24} color="#ccc" />,
            val: '服务条款',
            next: <Image source={require('../images/next.png')} style={styles.listInfo_next} />
        },
        {
            icon: <AntDesign name="user" size={24} color="#ccc" />,
            val: '关于我们',
            next: <Image source={require('../images/next.png')} style={styles.listInfo_next} />
        }
    ]
    useLayoutEffect(() => {
        api.getLoginname({ accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2' })
            .then(res => {
                if (res.success) {
                    api.getCollect(res.loginname)
                        .then(res => {
                            if (res.success) {
                                setCollectNum(res.data.length)
                            }
                        })
                    api.userMess(res.loginname)
                        .then(res => {
                            if (res.success) {
                                setUserInfo(res.data);
                                setUserInfoList([
                                    { title: '收藏', val: collectNum },
                                    { title: '积分', val: res.data.score },
                                    { title: '发布文章', val: res.data.recent_topics.length }
                                ])
                            }
                        });

                }
            })
        api.unreadMess({ accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2' })
            .then(res => {
                if (res.success) {
                    setunreadMess(res.data);
                }
            })

    }, [])
    return (
        <View style={styles.container}>

            <ImageBackground style={styles.bg} source={require('../images/bg.png')}>
                <View style={styles.header}>
                    <View style={styles.profile}>
                        <Image source={{ uri: userInfo.avatar_url }} style={styles.profile_img}></Image>
                        <Text style={styles.loginname}>{userInfo.loginname}</Text>
                    </View>
                    <FlatList data={userInfoList}
                        contentContainerStyle={styles.info}
                        renderItem={({ item }) => {
                            return <View style={styles.list}>
                                <Text style={styles.info_value}>{item.val}</Text>
                                <Text style={styles.info_title}>{item.title}</Text>
                            </View>
                        }}
                        keyExtractor={item => item.val}
                    />
                </View>
            </ImageBackground>
            <View style={{}}>
                <FlatList
                    data={listInfo}
                    contentContainerStyle={{ width: '100%', backgroundColor: 'white' }}
                    renderItem={({ item }) => {
                        return <View style={styles.list_second}>
                            <View style={{ flexDirection: 'row' }}>
                                <View>{item.icon}</View>
                                <Text style={{ color: '#656565', fontSize: 18, marginLeft: '12%' }}>{item.val}</Text>
                            </View>
                            {item.next}
                        </View>
                    }}
                    keyExtractor={item => item.val}
                />
            </View>

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#eee',
        width: '100%',
        height: '100%',
    },
    header: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        height: height(400)
    },
    bg: {
        width: '100%',
        height: height(400)
    },
    profile: {
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        height:height(300)
    },
    profile_img: {
        width: width(150),
        height: height(150),
        borderRadius: width(75),
        borderWidth: 4,
        borderColor: 'white'
    },
    loginname: {
        color: 'white',
        textAlign: 'center',
        textAlignVertical: 'center',
        fontSize: 20
    },
    info: {
        position: 'relative',
        flexDirection: 'row',
        width: '100%',
        justifyContent: 'space-around',
        alignItems: 'center',
    },
    info_title: {
        color: 'rgba(255,255,255,0.6)',
        fontSize: 13,
        writingDirection: 'rtl',
    },
    info_value: {
        fontSize: 20,
        color: 'white',
        writingDirection: 'rtl',
        fontWeight: 'bold'
    },
    list: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    list_second: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '90%',
        alignSelf: 'center',
        height: height(90),
        borderBottomWidth: 0.3,
        borderBottomColor: '#ccc',
        justifyContent: 'space-between'
    },
    listInfo_next: {
        width: width(20),
        height: height(20)
    },
    // btn: {
    //     width: '90%',
    //     height: 60,
    //     backgroundColor: '#f23030',
    //     borderRadius: 5,
    //     alignSelf: 'center',
    //     marginTop: 10
    // }
})
export default User


{/* <TouchableOpacity
                style={styles.btn}
                onPress={() => {
                    (async () => {
                        try {
                            await AsyncStorage.removeItem('@storage_Key', error => {
                                if (error) {
                                    console.log('删除失败,提示：' + error);
                                } else {
                                    console.log('删除成功')
                                    navigation.navigate('Enter')
                                }
                            })
                        } catch (e) {
                            console.log(e);
                        }
                    })()
                }}
                // onPress={(e)=>delStorage(e,navigation)}
                >
                <Text style={{ color: 'white', fontSize: 20,textAlign:'center',textAlignVertical:'center'}}>退出</Text>
            </TouchableOpacity> */}